import React, { ReactElement ,useState,useRef} from 'react'
import {useSelector,useDispatch} from "umi"
import {addTaocan,delTaocan,updateTaocan} from "../../api/huiyuanReq"
// import style from './index.less'
import { Space, Card, Table, Button, message, Modal, Form, Input,Switch } from 'antd';
interface Props {

}

export default function Vip({ }: Props): ReactElement {
 const [modal2Visible,changType] =useState(false);
 const [modal3Visible,changType2] =useState(false);
 const [vip,updateVip] =useState({_id:"",mouth:"",salePrice:"",normalPrice:"",type:"",name:""});
 const dispatch = useDispatch();

 const { data}:any=useSelector((state:any)=>({
  data:state.taocanModel.taocanList
 }))


 const del=async(_id:string)=>{
    const res=await delTaocan({_id});
    if(res&&res.meta&&res.meta.status===200)
    {
     message.success("删除成功！");
     dispatch({
       type:"taocanModel/getTaocan"
     });
    }else{
     message.success("删除失败！")
    }
 }

 const eleFrom:any=useRef();

 const eleFrom3:any=useRef();



 const setModal2Visible=(type:boolean):void=>{
      changType(type)
 }

 const setModal3Visible=(type:boolean):void=>{
      changType2(type)
 }

 const add=async()=>{
    setModal2Visible(true) 
}

  const onFinish = (values:any):void => {
        xinzeng({
            ...values,
            type:values.type?"1":"0"
        });
};
  const onFinish2 = (values:any):void => {
    xiugai({
        ...values,
        _id:vip._id,
        type:values.type?"1":"0"
    })
};


const xinzeng=async(obj:object)=>{
     const res=await addTaocan(obj);  
     if(res&&res.meta&&res.meta.status===200)
     {
      message.success("添加成功！");
      dispatch({
        type:"taocanModel/getTaocan"
      });
     }else{
      message.success("添加失败！")
     }
     setModal2Visible(false);
     
}
const xiugai=async(obj:object)=>{
     const res=await updateTaocan(obj);  
     if(res&&res.meta&&res.meta.status===200)
     {
      message.success("更新成功！");
      dispatch({
        type:"taocanModel/getTaocan"
      });
     }else{
      message.success("更新失败！")
     }
     setModal3Visible(false);
     
}


const updates=async(obj:any)=>{ 
    updateVip(obj);
    setModal3Visible(true); 
}

  const confirms = ():void => { 
    eleFrom.current.submit();   
};

  const confirms3 = ():void => { 
    eleFrom3.current.submit();   
};



 const columns:any = [
    {
        title: '套餐编号',
        dataIndex: '_id',
        key: '_id',
        align: "center"
    },
    {
        title: '套餐名',
        dataIndex: 'name',
        key: 'name',
        align: "center"
    },
    {
        title: '套餐月数',
        dataIndex: 'mouth',
        key: 'mouth',
        align: "center"
    },
    {
        title: '原价',
        dataIndex: 'normalPrice',
        key: 'normalPrice',
        align: "center"
    },
    {
        title: '打折价格',
        dataIndex: 'salePrice',
        key: 'salePrice',
        align: "center"
    },
    {
        title: '是否推荐',
        dataIndex: 'type',
        key: 'type',
        align: "center",
        render:(type:any)=>(
          <span>{type?"推荐":'不推荐'}</span>
        )
    },
    {
        title: '操作',
        render:(text:any)=>(
          <Space size="middle">
          <Button type="primary" onClick={()=>del(text)} danger>删除</Button>
          <Button type="primary" onClick={()=>updates(text)}>修改</Button>
      </Space>
        ),
        align: "center"
    }

];
const layout = {
  labelCol: { span: 5}
};


  return (
    <div style={{ display: "flex" }}>
      <Card style={{ width: "100%" }} title="套餐信息"  extra={<span onClick={add} style={{ color: "#73d13d" }}>添加</span>}>
        <Table  rowKey={(record) => record._id} pagination={{ defaultCurrent: 1, defaultPageSize: 5, showQuickJumper: true }} bordered  columns={columns} dataSource={data} />
      </Card>
      <Modal
                    destroyOnClose={true}
                    title="添加套餐"
                    centered
                    visible={modal2Visible}
                    onOk={() =>setModal2Visible(false)}
                    onCancel={() => setModal2Visible(false)}
                    footer={[
                        // 定义右下角 按钮的地方 可根据需要使用 一个或者 2个按钮
                        <Button key="submit" onClick={() => setModal2Visible(false)}>取消</Button>, <Button onClick={confirms} key="ok" type="primary">确认</Button>
                    ]}
                >
                    <Form
                      {...layout}
                       ref={eleFrom}
                        name="basic"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            label="套餐名称"
                            name="name"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入套餐名称',
                                },
                            ]}
                        >
                           <Input style={{ width: 345 }} placeholder="请输入套餐名称" />
                        </Form.Item>
                        <Form.Item
                            label="套餐月数"
                            name="mouth"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入正确套餐月数',
                                },
                            ]}
                        >
                           <Input style={{ width: 345 }} placeholder="请输入套餐月数" />
                        </Form.Item>



                        <Form.Item
                            label="套餐原价"
                            name="normalPrice"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入正确的套餐原价',
                                },
                            ]}
                        >
                           <Input style={{ width: 345 }} placeholder="请输入套餐原价" />
                        </Form.Item>

                        <Form.Item
                            label="套餐打折价"
                            name="salePrice"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入正确的套餐打折价',
                                },
                            ]}
                        >
                           <Input style={{ width: 345 }} placeholder="请输入套餐打折价" />
                        </Form.Item>

                        <Form.Item
                            label="是否推荐"
                            name="type"
                            valuePropName="checked"
                        >
                         <Switch />
                        </Form.Item>

                    </Form>
                </Modal>

                <Modal
                    destroyOnClose={true}
                    title="修改套餐"
                    centered
                    visible={modal3Visible}
                    onOk={() =>setModal3Visible(false)}
                    onCancel={() => setModal3Visible(false)}
                    footer={[
                        // 定义右下角 按钮的地方 可根据需要使用 一个或者 2个按钮
                        <Button key="submit" onClick={() => setModal3Visible(false)}>取消</Button>, <Button onClick={confirms3} key="ok" type="primary">确认</Button>
                    ]}
                >
                    
                    <Form
                      {...layout}
                       ref={eleFrom3}
                        name="basic2"
                        onFinish={onFinish2}
                    >
                        <Form.Item
                            label="套餐名称"
                            initialValue={vip.name}
                            name="name"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入套餐名称',
                                },
                            ]}
                        >
                           <Input  style={{ width: 345 }} placeholder="请输入套餐名称" />
                        </Form.Item>
                        <Form.Item
                            label="套餐月数"
                            name="mouth"
                            initialValue={vip.mouth}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入正确套餐月数',
                                },
                            ]}
                        >
                           <Input style={{ width: 345 }} placeholder="请输入套餐月数" />
                        </Form.Item>



                        <Form.Item
                            label="套餐原价"
                            name="normalPrice"
                            initialValue={vip.normalPrice}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入正确的套餐原价',
                                },
                            ]}
                        >
                           <Input style={{ width: 345 }} placeholder="请输入套餐原价" />
                        </Form.Item>

                        <Form.Item
                            label="套餐打折价"
                            name="salePrice"
                            initialValue={vip.salePrice}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入正确的套餐打折价',
                                },
                            ]}
                        >
                           <Input style={{ width: 345 }} placeholder="请输入套餐打折价" />
                        </Form.Item>

                        <Form.Item
                            label="是否推荐"
                            name="type"
                            valuePropName="checked"
                            initialValue={vip.type=='0'?false:true}
                        >
                         <Switch />
                        </Form.Item>

                    </Form>
                

                </Modal>
    </div>
  )
}
